<template>
    <div class="home-page" style="position: relative">
        <div class="page-nav">
            <div class="all-header">
                <div class="row-content">
                    <div class="shadow"></div>
                    <div class="logo-block">
                        <img class="logo-icon" :src="logoIcon"/>
                        <div class="logo-text">玄武区教育系统家长学校总校</div>
                    </div>
                    <div class="nav-list">
                        <div class="list-item" :class="[$route.fullPath.indexOf(item.pathName) !=-1?'active':'']" v-for="(item,index) in navList" @click="jumpPage(index)">
                            {{item.name}}
                        </div>
                    </div>
                    <div class="login">
                        <img :src="loginIcon"/>
                        <div class="user-name">登录</div>
                    </div>
                    <div class="search">
                        <img :src="searchIcon"/>
                        <el-input class="search-input" placeholder="站内搜索"></el-input>
                    </div>
                </div>
            </div>
            <div class="all-class-btn">
                <div class="btn-list">
                    <div @click="$router.push({path: '/category',query: {type:item.type}})" class="list-content" v-for="item in classList" >
                        {{item.name}}
                    </div>
                </div>
            </div>
        </div>
        <div class="page-content" style="background:#FFFFFF;">
            <div class="content-block">
                <router-view/>
            </div>
        </div>
        <div class="footer-block" >
            <page-footer></page-footer>
        </div>
    </div>
</template>

<script>
    //图片引入
    import logoIcon from '../image/index/logo.png'
    import loginIcon from '../image/index/login_icon.png'
    import searchIcon from '../image/index/search_icon.png'
    //组件引入
    import PageFooter from '../components/page-footer/page-footer'
    export default {
        name: "home-page",
        components:{
          PageFooter
        },
        data(){
          return{
              logoIcon,
              loginIcon,
              searchIcon,
              navList:[
                  {name:'首页',pathName:'misHome'},
                  {name:'通知通告',pathName:'notice'},
                  {name:'教培动态',pathName:'trends'},
                  {name:'教育科研',pathName:'education'},
                  {name:'教学研究',pathName:'teaching'},
                  {name:'教师培训',pathName:'train'},
                  {name:'现代教育技术',pathName:'technology'},
                  {name:'心理教育',pathName:'psychology'},
                  {name:'家长学校',pathName:'parent'},
              ],
              classList:[
                  {name:'中学语文',type:'zxyw'},{name:'小学语文',type:'xxyw'},{name:'中小学艺术',type:'zxxys'},{name:'中学数学',type:'zxsx'},{name:'小学数学',type:'xxsx'},{name:'中小学体育',type:'zxxty'},{name:'中学英语',type:'zxyy'},
                  {name:'小学英语',type:'xxyy'},{name:'学前教育',type:'xqjy'},{name:'中学物理',type:'zxwl'},{name:'中学历史',type:'zxls'},{name:'品德社会',type:'pdsh'},{name:'中学化学',type:'zxhx'},{name:'中学地理',type:'zxdl'},
                  {name:'小学科学',type:'xxkx'},{name:'中学政治',type:'zxzz'},{name:'中学生物',type:'zxsw'},{name:'中小学信息技术',type:'xxjs'},
              ]
          }
        },
        mounted(){
            window.addEventListener('scroll', this.changeFloatTop);
            console.log(this.$route)
        },
        watch:{
            //路由跳转监听页面是否有浮动元素存在
            $route(){
                window.addEventListener('scroll', this.changeFloatTop);

            }
        },
        destroyed(){
            window.removeEventListener('scroll', this.changeFloatTop)
        },
        methods:{
            /**
             * 改变浮动区域高度
             */
            changeFloatTop(){
                let floatDom = document.querySelector('#floatBlock');
                // console.log('floatDom',floatDom)
                if(!floatDom){
                    window.removeEventListener('scroll', this.changeFloatTop)
                }else{
                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
                        domHeight = floatDom.offsetHeight,
                        domBottom = floatDom.style.bottom;
                    floatDom.style.top = scrollTop+'px';
                }

            },
            /**
             * 导航页面跳转
             * @param index
             */
            jumpPage(index){
                if(index == 0){
                    this.$router.push({name:this.navList[index].pathName})
                }else{
                    this.$router.push({path:'/listPage',query:{pageType:this.navList[index].pathName}})
                }

            }
        }
    }
</script>

<style lang="scss">
    @import "../../assets/public-style";
</style>
<style lang="scss" src="./index.scss" scoped>


</style>
